/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '../../../assets/styles/base/colors';
@import '../../../assets/styles/base/variables';
@import '../create-identity-card/create-identity-card.component';

.edit-card-credentials {

    // Take main styling from create
    @extend .create-card;

    .profiles {
        credentials {
            .create-route {
                .file-types-list {
                    margin-top: 0;
                }

            }
        }

        .create-route {
            margin-right: $space-xlarge;
            margin-bottom: $space-mlarge;
            border-bottom: $border-width-small solid $fourth-highlight;
        }

        .description {
            flex-basis: 10%;
        }

        & > *:last-child {
            flex-basis: 70%;
        }
    }

    .noCerts {
        display: flex;
        flex-direction: column;
        margin-bottom: $space-large;
        margin-right: $space-xlarge;

        .option {
            display: flex;
            flex-direction: row;
            align-content: center;
            margin-top: $space-medium;
        }

        p {
            color: $primary-text;
            line-height: 19px;
            margin-top: 0;
            margin-bottom: 0;
            font-weight: 300;
        }
    }

    .roles {
        margin-bottom: $space-large;

        p {
            color: $primary-text;
            margin-top: 0;
            margin-bottom: 0;
            font-weight: 300;
        }

        .role-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: $space-large;
            position: relative;

            .description {
                margin-left: $space-large;
            }

            .option {
                margin-bottom: $space-large;
            }
        }
    }

    file-importer {
        width: 90%;
        padding-right: 10px;
    }

    footer {
        .circle-path {
            stroke: $white;
        }

        width: 100%;
    }
}
